<template>
  <div class="square">
    <div class="navicat">
      <span
        class="iconfont icon-fanhui"
        @click="$router.push('/home/index')"
      ></span>
      <span>精选歌单</span>
    </div>
    <!--  -->
    <div class="date">
      <span>2022-12-30</span>
    </div>
    <div class="list">
      <gedanmodel
        class="model"
        v-for="item in gedanlist"
        :select="2"
        :id="item.id"
        :bottominfo="false"
      ></gedanmodel>
    </div>
  </div>
</template>

<script>
import gedanmodel from "@/components/Small/gedanmodel.vue";
import { get } from "../http/request";
export default {
  components: {
    gedanmodel,
  },
  data() {
    return {
      gedanlist: null,
    };
  },
  mounted() {
    get("/playlist/highquality/tags").then((res) => {
      console.log(res);
      this.gedanlist = res.data.tags;
      // console.log( this.gedanlist);
    });
  },
};
</script>

<style lang="scss" scoped>
.date {
  font-size: 30rem;
  color: #666;
  display: flex;
  justify-content: start;
  width: 710rem;
  margin: 0 auto;
  margin-top: 50rem;
}
.navicat {
  width: 710rem;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  color: #fff;
  margin-top: 50rem;
  position: relative;
  span {
    font-size: 45rem;
    font-weight: bold;
    &:first-child {
      position: absolute;
      left: 0;
    }
  }
}
.list {
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  width: 710rem;
  margin-top: 50rem;
  .model {
    width: 50%;
    margin-top: 20rem;
  }
}
</style>
